<template>
	<!-- 首页 -->
	<Layout>
		<!-- Page Header -->
		<header class="masthead" :style="{ 'background-image': `url(${BaseUrl}${$page.allStrapiGeneral.edges[0].node.cover.url})` }">
			<div class="overlay"></div>
			<div class="container">
				<div class="row">
					<div class="col-lg-8 col-md-10 mx-auto">
						<div class="site-heading">
							<h1>{{ $page.allStrapiGeneral.edges[0].node.title }}</h1>
							<span class="subheading">{{ $page.allStrapiGeneral.edges[0].node.subtitle }}</span>
						</div>
					</div>
				</div>
			</div>
		</header>

		<!-- Main Content -->
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-md-10 mx-auto">
					<!-- 遍历的模板 -->
					<!-- <div class="post-preview">
						<a href="post.html">
							<h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
							<h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
						</a>
						<p class="post-meta">
							Posted by
							<a href="#">Start Bootstrap</a>
							on September 24, 2019
						</p>
					</div> -->
					<div class="post-preview" v-for="post in $page.posts.edges" :key="post.node.id">
						<g-link :to="`/post/${post.node.id}`">
							<h2 class="post-title">{{ post.node.title }}</h2>
							<!-- <h3 class="post-subtitle">{{post.node.content}}</h3> -->
						</g-link>
						<p class="post-meta">
							Posted by
							<a href="#">{{ post.node.created_by.firstname + ' ' + post.node.created_by.lastname }}</a>
							on {{ post.node.created_at | filterDate }}
						</p>
						<p>
							<span v-for="tag in post.node.tags" :key="tag.id">
								<g-link :to="`/tag/${tag.id}`">{{ tag.title }}</g-link>
								<span>&nbsp;&nbsp;</span>
							</span>
						</p>
						<hr />
					</div>

					<!-- Pager -->
					<div class="clearfix"><a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a></div>
				</div>
			</div>
		</div>
		<Pager
			class="pageWraper"
			style="display: flex;justify-content: center;align-items: center;
		margin:20px 0;"
			:info="$page.posts.pageInfo"
		/>
	</Layout>
</template>
<!-- $page对应url传递的参数 -->
<page-query>
query($page:Int){
	posts:allStrapiPost(perPage:2,page:$page) @paginate{
	pageInfo {
		  totalPages
		  currentPage
		}
    edges{
      node{
        id
        title
        created_by{
          id
          firstname
          lastname
        }
        tags{
          id
          title
        }
		created_at
      }
    }

  }
  allStrapiGeneral{
      edges{
        node{
          id
          title
          subtitle
          cover{
            url
          }
        }
      }
    }
}
</page-query>

<script>
import { BaseUrl } from '../const/index.js';
import { Pager } from 'gridsome';
import dayjs from 'dayjs';
export default {
	name: 'Home',
	metaInfo: {
		title: 'Hello, world!'
	},
	filters: {
		filterDate(data) {
			return dayjs(data).format('YYYY-MM-DD HH:mm:ss');
		}
	},
	components: {
		Pager
	},
	data(){
		return {
			BaseUrl
		}
	}
};
</script>

<style>
.pageWraper a {
	margin: 0 10px;
}
</style>
